'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Link} from 'react-router';
import * as actions from '../../actions/ring_runing_log';
import { Button,Icon,Dialog,Pagination,Search,Form,Loading,Menu,Input} from 'qnui';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import { Row, Col } from 'qnui/lib/grid';
import Breadcrumb from 'qnui/lib/breadcrumb'
import Step, { Item as StepItem } from 'qnui/lib/step';
import DatePicker, { RangePicker } from 'qnui/lib/date-picker';
import SystemDialog from 'components/system-dialog/index';
import './index.scss';

class RingRuningLog extends React.Component {
    constructor(props) {
        super(props);
		const id = (this.props.location.query.id);
		this.dispatch = this.props.dispatch;
        this.state = {
			refreshDialog:false,
			refreshContent:"",
			currentPage:1,
			pageSize:20,
			editActive:false,
			overlayVisible:false,
			tagName:false,
			active:false,
			start_time:false,
			end_time:false,
			id,
			action:"all",
			search:""
        };
		this.dispatch(
			actions.getTagLog({
				action:this.state.action,
				id,
				page:1,
				page_size:this.state.pageSize
			})
		);
    }
	handleGetLogList(action){
		this.setState({action});
		this.dispatch(
			actions.getTagLog({
				id:this.state.id,
				action,
				page:1,
				page_size:this.state.pageSize
			})
		);
	}

	onCloseSystemDialog(){
		this.setState({"refreshDialog":false,"orderDialog":false});
		this.props.dispatch(actions.closeDialog());
	}
	handleCheckStatus(){
		return;
	}
	handlePageChange(page){
		this.setState({"currentPage":page});
		this.dispatch(
			actions.getTagLog({
				action:this.state.action,
				id:this.state.id,
				page:page,
				page_size:this.state.pageSize,
				search:this.state.search
			})
		);
	}
	handlePageSizeChange(size){
		this.setState({"currentPage":1,"pageSize":size});
		this.dispatch(
			actions.getTagLog({
				action:this.state.action,
				id:this.state.id,
				page:1,
				page_size:size,
				search:this.state.search
			})
		);
	}
	handleOnSearch(val){
		this.setState({search:val.key});
		this.dispatch(
			actions.getTagLog({
				action:this.state.action,
				id:this.state.id,
				page:1,
				page_size:this.state.pageSize,
				search:val.key
			})
		);
	}
	handleEditActive(active){
		this.setState({
			editActive:true,
			tagName:active.name,
			start_time:false,
			end_time:false,
			overlayVisible:false,
			active
		});
	}
	onEditOk(){
		if(this.state.tagName!=this.state.active.name || this.state.start_time || this.state.end_time){
			// 有任何一样重设则提交请求，否则关闭对话框
			this.dispatch(
				actions.editActive({
					activity_id : this.state.active.activity_id,
					name : this.state.tagName?this.state.tagName:this.state.active.name,
					description : this.state.active.description,
					start_time : this.state.start_time? this.state.start_time:this.state.active.start_time,
					end_time : this.state.end_time? this.state.end_time:this.state.active.end_time
				})
			);
		}else{
			this.setState({overlayVisible:false,editActive:false});
		}
	}
	handleManualAction(log){
		Dialog.confirm({
			content:"您确定要立即取消这个客户的折扣吗？",
			onOk: () => {
				this.dispatch(
					actions.removeLog(log)
				);
			}
		});
	}
	setAddUserNick(val){
		this.setState({"add_user_nick":val});
	}
	setAddUserCountdown(val){
		this.setState({"add_user_countdown":val})
	}
	handleAddUserTag(){
		this.setState({"add_user_nick":"","add_user_countdown":0});
		const content = <Row>
							手动添加用户：
							<Input 
								style={{width:"100px"}} 
								placeholder="用户昵称" 
								onChange={this.setAddUserNick.bind(this)} 
							/>
							&nbsp;
							<Input 
								style={{width:"100px"}} 
								placeholder="持续几分钟" 
								onChange={this.setAddUserCountdown.bind(this)} 
							/>
						</Row>
		Dialog.confirm({
			content,
			onOk: () => {
					if(this.state.add_user_nick==""){
						Dialog.alert({content:"请输入用户昵称！"});
						return;
					}
					if(this.state.add_user_countdown==0){
						Dialog.alert({content:"请输入倒计时！"});
						return;
					}
					Dialog.confirm({
						content:"您确定要为"+this.state.add_user_nick+"开通折扣，并持续"+this.state.add_user_countdown+"分钟吗？",
						onOk: () => {
							this.dispatch(
								actions.addUserTag({
									buyer_nick:this.state.add_user_nick,
									tag_id:this.state.id,
									countdown:this.state.add_user_countdown
								})
							);
						}
					});
				return;
			}
		});
	}
	onEditCancel(){
		this.setState({editActive:false});
	}
	setTag(tagName){
		this.setState({tagName,overlayVisible:false});
	}
	searchResult(hasTag,isPrefect){
		this.setState({"hasTag":hasTag,"isPrefect":isPrefect});
	}
	handleShowSearchTag(){
		this.setState({overlayVisible:true});
	}
	setStartTime(start_time){
		this.setState({start_time});
	}
	setEndTime(end_time){
		this.setState({end_time});
	}
	removeActive(activity_id){
		this.dispatch(
			actions.removeActive(activity_id)
		);
	}
	stopAll(){
		Dialog.confirm({
			content:"您确定要取消所有超时折扣吗？",
			onOk: () => {
				const data = this.props.ring_runing_log.data;
				const logs = data?data.data:[];
				const total = data?parseInt(data.total):0;
				if(total<=0){
					Dialog.alert({content:"抱歉，当前没有超时的折扣"});
					return;
				}
				const pages = Math.ceil(total/this.state.pageSize);
				if(total>0){
					for(let p=1;p<=pages;p++){
						logs.map((log,key)=>{
							this.dispatch(
								actions.removeLog(log)
							);
						});
						actions.getTagLog({
							action:this.state.action,
							id:this.state.id,
							page:1,
							page_size:this.state.pageSize,
							search:val.key
						})
					}
				}
				return;
			}
		});
	}
  render() {
	const data = this.props.ring_runing_log.data;
	const logs = data?data.data:[];
	const total = data?parseInt(data.total):0;
	const noneMsg = total?"":<Row justify="center">没有任何日志</Row>;
	const stopLogId = this.props.ring_runing_log.stopLogId;
	const cancelBtn = this.state.action=="timeout"?<Button onClick={this.stopAll.bind(this)}>批量取消</Button>:"操作";
	return (
        <div className="page1-page">
        	<SystemDialog 
				 loginError={this.props.ring_runing_log.loginError}
			    creating={this.props.ring_runing_log.creating}
			    message={this.props.ring_runing_log.message}
			    error={this.props.ring_runing_log.error}
				 refreshDialog={this.state.refreshDialog}
				 orderDialog={this.state.orderDialog}
        		 onCloseDialog={this.onCloseSystemDialog.bind(this)}
				/>
			<Row style={{background:"#F6F6F6",margin:"3px 0",height:"43px"}} justify="start">
			<Col span="8" align="center">
			<Breadcrumb maxNode={5}>
				  <Breadcrumb.Item>打折活动</Breadcrumb.Item>
				  <Breadcrumb.Item>标签人群</Breadcrumb.Item>
				  <Breadcrumb.Item>运行日志</Breadcrumb.Item>
			  </Breadcrumb>
			</Col>
		  </Row>
		<Row style={{padding:"0"}}>
				<Col span="6">
					<Button.Group>
						<Button onClick={this.handleGetLogList.bind(this,"add")}>正在打折</Button>
						<Button onClick={this.handleGetLogList.bind(this,"del")}>已完成</Button>
						<Button onClick={this.handleGetLogList.bind(this,"all")}>全部</Button>
						<Button onClick={this.handleGetLogList.bind(this,"timeout")}>已超时</Button>
					</Button.Group>
				</Col>
				<Col span="5">
					<Search
						inputWidth={100}
						type="normal"
						placeholder="搜索买家..."
						searchText="搜索"
						onSearch={this.handleOnSearch.bind(this)}
						/>
				
				</Col>
				<Col span="2">
					<Button type="normal" onClick={this.handleAddUserTag.bind(this)} style={{padding:"0 8px"}} shape="warning"><Icon type="add" /></Button>
				</Col>
				<Col span="11">
					 <Pagination pageShowCount={2} showJump={true} current={this.state.currentPage} total={total} pageSize={this.state.pageSize} pageSizeList={[20,50,100]} type="simple" pageSizeSelector="dropdown"  onChange={this.handlePageChange.bind(this)} onPageSizeChange={this.handlePageSizeChange.bind(this)} />
				</Col>
		</Row>
		<Row align="center" className="list">
			<Col fixedSpan="8">
				人群标签
			</Col>
			<Col fixedSpan="8">
				买家昵称
			</Col>
			<Col fixedSpan="8">
				获得折扣时间
			</Col>
			<Col fixedSpan="4">
				倒计时
			</Col>
			<Col fixedSpan="8">
				取消折扣时间
			</Col>
			<Col fixedSpan="4">
				持续时间
			</Col>
			<Col fixedSpan="4" title="重试超过5次不再自动处理">
				重试次数
			</Col>
			<Col fixedSpan="5">
			{cancelBtn}
			</Col>
		</Row>
		{noneMsg}
		{logs.map((log,key)=>{
			let time = new Date();
			let start_time = new Date(log.add_time);
			let end_time = new Date(log.remove_time);
			let real_countdown = "";
			let remove_time = "";
			if(log.remove_time==null){
				remove_time = "尚未结束";
				real_countdown=parseInt((new Date().getTime()-start_time.getTime())/1000)+"秒";
			}else{
				remove_time = log.remove_time;
				real_countdown=((end_time.getTime()-start_time.getTime())/1000)+"秒";
			}
			if(stopLogId==log.id){
				remove_time="手动结束";
			}
			return(
			<Row key={key} align="center" className="list" style={{color:"#1BB11B"}}>
				<Col fixedSpan="8">
					{log.tag_name}
				</Col>
				<Col fixedSpan="8">
					{log.buyer_nick}
				</Col>
				<Col fixedSpan="8">
					{log.add_time}
				</Col>
				<Col fixedSpan="4">
					{log.countdown}分钟
				</Col>
				<Col fixedSpan="8">
					{remove_time}
				</Col>
				<Col fixedSpan="4">
					{real_countdown}
				</Col>
				<Col fixedSpan="4">
					{log.re_try}
				</Col>
				<Col fixedSpan="5">
					<Button shape="ghost" onClick={this.handleManualAction.bind(this,log)} >手动操作</Button>
				</Col>
			</Row>
			)
		})}
        </div>
    );
  }
}


export default connect((state)=> {
  return {
    ring_runing_log: state.ring_runing_log
  };
})(RingRuningLog);
